<mat-card class="page-title">
    <div class="btn-toolbar float-left" role="toolbar">
        <a mat-icon-button (click)="globalService.toggleSideNav()">
            <mat-icon color="primary">menu</mat-icon>
        </a>
    </div>
    <span>附件管理</span>
    <div class="btn-toolbar float-right" role="toolbar">
        <button mat-icon-button (click)="refresh()" matTooltip="刷新">
            <mat-icon color="primary">refresh</mat-icon>
        </button>
    </div>
</mat-card>

<mat-card style="margin-bottom: 50px">
    <div>
        <span style="font-weight: bold">上传附件 &nbsp;&nbsp;</span>
        <input type="file" ng2FileSelect [uploader]="uploader" accept="*.*" />
        <span class="float-right">已选择 {{ uploader?.queue?.length }} 个文件</span>
    </div>
    <br>
    <div *ngIf="uploader?.queue?.length > 0">
        <table class="table table-striped">
            <thead>
            <tr>
                <th width="50%">文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th width="100px">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of uploader.queue">
                <td>{{ item?.file?.name }}</td>
                <td>{{ item?.file?.size/1024 | number:'1.1-1' }} KB</td>
                <td>
                    <span *ngIf="item.isSuccess" style="color: forestgreen">上传成功</span>
                    <span *ngIf="item.isCancel" style="color: #ffc107">上传被取消</span>
                    <span *ngIf="item.isError" style="color: red">上传失败</span>
                </td>
                <td>
                    <a (click)="upload(item)" *ngIf="!item.isReady && !item.isUploading && !item.isSuccess">
                        <span class="fa fa-upload" style="color: #673ab7" matTooltip="上传"></span>
                    </a>
                    &nbsp;&nbsp;
                    <a (click)="item.cancel()" *ngIf="item.isUploading">
                        <span class="fa fa-ban" style="color: #ffc107" matTooltip="取消"></span>
                    </a>
                    <a (click)="item.remove()" *ngIf="!item.isUploading">
                        <span class="fa fa-remove" style="color: red" matTooltip="移除"></span>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
        <mat-progress-bar mode="determinate" [value]="uploader.progress"></mat-progress-bar>
    </div>
    <br>

    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr>
                <th><span>id</span> <span class="fa fa-sort"></span></th>
                <th><span>上载人</span> <span class="fa fa-sort"></span></th>
                <th><span>文件名</span> <span class="fa fa-sort"></span></th>
                <th><span>大小</span></th>
                <th><span>日期</span> <span class="fa fa-sort"></span></th>
                <th><span>URL</span></th>
                <th width="100px">操作</th>
            </tr>
            </thead>
            <tbody *ngIf="attachments">
                <tr *ngFor="let attachment of attachments; trackBy: trackIdentity">
                    <td>{{attachment.id}}</td>
                    <td>{{attachment.authorLogin}}</td>
                    <td>{{attachment.name}}</td>
                    <td>
                        <span *ngIf="attachment.fileSize < 1024">{{attachment.fileSize}} B</span>
                        <span *ngIf="attachment.fileSize >= 1024">{{(attachment.fileSize / 1024) | number: '1.1-1'}} KB</span>
                    </td>
                    <td>{{attachment.createdDate | date:'yyyy-MM-dd'}}</td>
                    <td>{{attachment.url}}</td>
                    <td width="100px" nowrap>
                        <a href="{{attachment.url}}" download matTooltip="下载附件">
                            <span class="fa fa-download" style="color: #673ab7"></span>
                        </a>
                        &nbsp;&nbsp;
                        <a (click)="deleteAttachment(attachment)" matTooltip="删除附件">
                            <span class="fa fa-trash" style="color: orangered"></span>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <mat-paginator #paginator
                       [length]="totalItems"
                       [pageSize]="itemsPerPage"
                       [pageSizeOptions]="pageSizeOptions"
                       (page)="reloadPage($event)"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</mat-card>
